<template>
  <div class="dataView">
    <breadcrumbNavigation v-if="props.title" :title="props.title" :showRightIcon="false"></breadcrumbNavigation>
    <ul class="dataViewBox">
      <li class="dataViewItem" v-for="(item,index) in data.options">
        <div class="data">
          <i class="iconfont" :class="item.icon"></i>
          <div class="upgradeAccount" v-if="index ==1 ">升级账户</div>
        </div>
        <div class="dataViewText">
          <span v-text="item.title"></span>
          <CountTo
              :start="0"
              :end="item.value"
              prefix=""
              suffix=""
              :autoPlay="true"
              :duration="3000"
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import breadcrumbNavigation from "@/components/breadcrumbNavigation/index.vue";
import CountTo from "@/components/countTo/index.vue";

const props = defineProps({
  title: {
    type: String,
    default: "数据总览",
  },
  start: {
    type: Number,
    default: 0,
  },
  end: {
    type: Number,
    default: 0
  }
});
const data = reactive({
  options: [
    {icon: 'icon-Web', title: '收藏卡片', value: 195},
    {icon: 'icon-Web', title: '收藏夹', value: 22},
    {icon: 'icon-Web', title: '智能列表', value: 1},
    {icon: 'icon-Web', title: '标签', value: 5},
    {icon: 'icon-Web', title: '标注', value: 2},
    {icon: 'icon-Web', title: '累计访问', value: 2},
  ]
})
</script>

<style lang="less" scoped>
.dataView {
  width: 100%;
  .dataViewBox {
    height: 216px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .dataViewItem {
      background-color: #fff;
      border-radius: 14px;
      width: 48%;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .data {
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        i {
          color: #2196f3;
          text-shadow: 0 0 2px, 0 0 4px;
        }

        .upgradeAccount {
          font-weight: 500;
          font-size: 12px;
          color: #fff;
          background-color: #ffa11f;
          padding: 4px;
          border-radius: 5px;
        }
      }

      .dataViewText {
        width: 80%;
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

</style>
